<!-- 用户里的动态页面 -->
<template>
  <div id="userEdit">
    <div class="edit-box">
      <div class="return-box">
        <router-link to="/user">
          <div class="return-button">返回个人主页<img src="..\..\assets\userImg\right.png"  width="14px" height="14px"/>
          </div>
        </router-link>
      </div>

      <div class="return-box">
        <div class="value-alter" @click="dialogFormVisible = true"><img src="..\..\assets\userImg\alter.png"  width="14px" height="14px"/> 修改</div>
        <el-dialog title="修改个人信息" :visible.sync="dialogFormVisible" append-to-body>
          <el-form :model="list">
            <el-form-item label="昵称" :label-width="formLabelWidth">
              <el-input v-model="UserList.userMessages.nickName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
              <el-radio v-model="UserList.userMessages.sex" label="男">男</el-radio>
              <el-radio v-model="UserList.userMessages.sex" label="女">女</el-radio>
            </el-form-item>
            <el-form-item label="家乡" :label-width="formLabelWidth">
              <el-input v-model="UserList.userMessages.dwell" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="职业" :label-width="formLabelWidth">
              <el-input v-model="UserList.userMessages.profession" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" :label-width="formLabelWidth">
              <el-input v-model="UserList.userMessages.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="简介" :label-width="formLabelWidth">
              <el-input v-model="UserList.userMessages.introduce" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="commit">确 定</el-button>
          </div>
        </el-dialog>
      </div>

      <div class="edit-name">
        <div class="font">昵称:</div>
        <div class="user-value"><strong>{{UserList.userMessages.nickName}}</strong></div>
      </div>
      <div class="edit-sex">
        <div class="font">性别:</div>
        <div class="user-value">{{UserList.userMessages.sex}}</div>
      </div>
      <div class="edit-home">
        <div class="font">家乡:</div>
        <div class="user-value">{{UserList.userMessages.dwell}}</div>
      </div>
      <div class="edit-profession">
        <div class="font">职业:</div>
        <div class="user-value">{{UserList.userMessages.profession}}</div>
      </div>
      <div class="edit-mail">
        <div class="font">邮箱:</div>
        <div class="user-value">{{UserList.userMessages.email}}</div>
      </div>
      <div class="edit-introduce">
        <div class="font">简介</div>
        <div class="user-value">{{UserList.userMessages.introduce}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'userEdit',
    inject: ['reload'],
    data () {
      return {
        seen: false,
        flag: true,
        list:
          {
            username: '',
            sex: '',
            home: '',
            profession: '',
            mail: '',
            introduce: ''
          },
        formLabelWidth: '120px',
        dialogTableVisible: false,
        dialogFormVisible: false,
        UserList: []
      }
    },
    computed: {
    },
    methods: {
      commit () {
        this.dialogFormVisible = false
        if (this.UserList.userMessages.nickName == null) {
          this.$Message.error('回复不可为空!')
        } else {
          this.axios.get('/api/setUserMessage', {
            params: {
              email: this.UserList.userMessages.email,
              introduce: this.UserList.userMessages.introduce,
              sex: this.UserList.userMessages.sex,
              dwell: this.UserList.userMessages.dwell,
              profession: this.UserList.userMessages.profession,
              nickName: this.UserList.userMessages.nickName,
              phone: sessionStorage.getItem('phone')
            }
          })
            .then((response) => {
              if (response.data.code === 200) {
                this.$Message.success('成功!')
                this.reload()
              } else {
                this.$Message.error('失败!')
              }
            })
            .catch((error) => {
              this.$Notice.error({
                title: '通知',
                desc: '接口，异常！'
              })
              console.info(error)
            })
}
      },
      enter: function () {
        this.seen = true
      },
      leave: function () {
        this.seen = false
      },
      edit () {
        this.flag = false
      },
      hello () {
        this.flag = true
      },
      input () {
        this.flag = false
      }
    },
    created () {
      this.axios.get('/api/findUserMessage', {
        params: {
          phone: sessionStorage.getItem('phone')
        }
      })
        .then(res => {
          this.UserList = res.data.data
          console.log(res)
        })
    }

  }
</script>

<style scoped>
  @import '../../../../../static/css/user/UserEdit.css';
</style>
